<template>
  <a-modal
    v-model:visible="visible"
    title="绑定变量"
    width="45%"
    wrapClassName="variable-modal"
    okText="确定"
    cancelText="取消"
    @ok="handleOk"
    @cancel="handleCancel"
  >
     <a-form
      ref="formRef"
      :model="model"
      :rules="rules"
      label-align="left"
      :label-col="{ span: 6 }"
    >
      <a-form-item label="选择变电站" name="substationId">
        <a-select 
            v-model:value="model.substationId"
            placeholder="请选择变电站"
            :options="substationOptions"
            @change="handleChangeSubstationFun"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="选择线路" name="lineId">
        <a-select 
            v-model:value="model.lineId"
            placeholder="请选择线路"
            :options="lineOptions"
            @change="handleChangeLineIdFun"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="选择点号" name="attributeId">
        <a-select 
            v-model:value="model.attributeId"
            placeholder="请选择点号"
            :options="attributeOptions"
        >
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineComponent, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouterStore } from '@/store/router';
import { message } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import { customRequest } from "@/utils/otherRequest";
import { ISelectOptions } from '@/utils/dataAtRest';

// import { useCommonStoreWithOut } from '@/store/modules/common';
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';

  const routerStore = useRouterStore();
  const { activeProjectId, activeProjectList } = storeToRefs(routerStore);
  const visible = ref(false);
  const formRef = ref();
  const model = ref({
    name: '',
    dataId: '',
    substationId: '',
    lineId: '',
    attributeId: '',
  });
  const substationOptions = ref<ISelectOptions[]>([]);
  const lineOptions = ref<ISelectOptions[]>([]);
  const attributeOptions = ref<ISelectOptions[]>([]);
  const rules: Record<string, Rule[]> = {
    substationId: [{ required: true, message: '请选择变电站', trigger: 'change' }],
    lineId: [{ required: true, message: '请选择线路', trigger: 'change' }],
    attributeId: [{ required: true, message: '请选择点号', trigger: 'change' }],
  };
  

  const showModal = async () => {
    loadSubstationListFun();
    loadLineListFun();
    loadAttributeFun();
    visible.value = true;
  }

  const loadSubstationListFun = async () => {
    const _apiUrl = activeProjectList.value.properties.find(item => item.name === 'apiUrl').value;
    const _interface = activeProjectList.value.properties.find(item => item.name === '变电站').value;
    const res = await customRequest(
        _apiUrl+_interface,
        'GET',
    );
    if(res) {
        if(res.code === 1000) {
            substationOptions.value = res.data.map(item => ({
                label: item.name,
                value: item.id,
            }));
        } else {
            message.error(res.msg);
        }
    }
  }
  const loadLineListFun = async () => {
    const _apiUrl = activeProjectList.value.properties.find(item => item.name === 'apiUrl').value;
    const _interface = activeProjectList.value.properties.find(item => item.name === '线路').value;
    const res = await customRequest(
        _apiUrl+_interface,
        'GET',
        model.value.attributeId !== ''  ? { substationId: model.value.substationId } : {}
    );
    if(res) {
        if(res.code === 1000) {
            lineOptions.value = res.data.map(item => ({
                label: item.name,
                value: item.id,
            }));
        } else {
            message.error(res.msg);
        }
    }

  }
  const loadAttributeFun = async () => {
    const _apiUrl = activeProjectList.value.properties.find(item => item.name === 'apiUrl').value;
    const _interface = activeProjectList.value.properties.find(item => item.name === '点号').value;
    const res = await customRequest(
        _apiUrl+_interface,
        'GET',
        {
            ...(model.value.attributeId !== '' && { substationId: model.value.substationId }),
            ...(model.value.lineId !== '' && { lineId: model.value.lineId })
        }
    );
    if(res) {
        if(res.code === 1000) {
           attributeOptions.value = res.data.datas.map(item => ({
                label: item.name,
                value: item.id,
            }));
        } else {
            message.error(res.msg);
        }
    }
  }
  const handleChangeSubstationFun = (value: string) => {
    model.value.substationId = value;
    loadLineListFun();
    loadAttributeFun();
  }
  const handleChangeLineIdFun = (value: string) => {
    model.value.lineId = value;
    loadAttributeFun();
  }

  const handleOk = () => {
    formRef.value
    .validate()
    .then(() => {
        console.log('model.value', model.value);
    })
    .catch((error: any) => {
      console.log('error', error);
    });
    //   visible.value = false;
    //   let data = treeData.value.find((item) => item.id == model.value.dataId);
    //   if (data) {
    //     emit('oks', {
    //       ...data,
    //     });
    //   }
  }
    const handleCancel = () => {
    //   model.value = {
    //     name: '',
    //     dataId: '',
    //   };
    };

defineExpose({ showModal });
</script>

<style lang="scss" scoped>
.variable-modal {
  .ant-modal-body {
    .anticon {
      cursor: pointer;
    }
    .ant-form {
      margin: 12px 0 0;
    }
  }
}
</style>